<template>
  <div id="addCus">
    <div>
      <i class="el-icon-user"></i>:
      <el-input v-model="account" placeholder="请输入账号"></el-input>
    </div>
    <div>
      <i class="el-icon-view"></i>:
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
    </div>
    <div>
      <i class="el-icon-postcard"></i>:
      <el-input v-model="name" placeholder="请输入姓名"></el-input>
    </div>
    <div>
      <i class="el-icon-coordinate"></i>:
      <el-input v-model="age" placeholder="请输入年龄"></el-input>
    </div>
    <div>
      <i class="el-icon-phone-outline"></i>:
      <el-input v-model="phone" placeholder="请输入电话"></el-input>
    </div>
    <div>
      <i class="el-icon-male"></i>:
      <el-radio v-model="gender" label="男">男</el-radio>
      <el-radio v-model="gender" label="女">女</el-radio>
    </div>
    <div>
      <i class="el-icon-monitor"></i>:
      <el-select v-model="salesMenId" placeholder="请选择销售员">
        <el-option
          v-for="item in salesMen"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        >
        </el-option>
      </el-select>
    </div>
    <el-button
      type="success"
      @click="
        addCustomers({
          account,
          password,
          name,
          age,
          gender,
          phone,
          salesMenId,
        })
      "
      >确认新增</el-button
    >
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions: mapActionsCustomers } = createNamespacedHelpers('Customers')
const {
  mapActions: mapActionsSalesMen,
  mapState: mapStateSalesMen,
} = createNamespacedHelpers('salesMen')
export default {
  created() {
    this.getSalesMen()
  },
  data() {
    return {
      account: '',
      password: '',
      name: '',
      age: '',
      gender: '',
      phone: '',
      salesMenId: '',
    }
  },
  computed: { ...mapStateSalesMen(['salesMen']) },
  methods: {
    ...mapActionsCustomers(['addCustomers']),
    ...mapActionsSalesMen(['getSalesMen']),
  },
}
</script>

<style scoped>
.el-input {
  width: 30%;
}
i {
  font-size: 25px;
}
.el-select .el-input {
  width: 100%;
}
#addCus > div {
  margin: 10px auto;
}
</style>
